<template>
	<view :style="{ height: defaultHeight + 'rpx' }">
		<view class="uiwu-nav-bar uiwu-flex" :class="isfixed ? 'active' : ''" :style="{ height: defaultHeight + 'rpx', top: `calc(${headBar} + ${top})`, 'background-color': bgColor }">
			<view
				v-for="(item, index) in list"
				:key="index"
				:style="{ 'line-height': defaultHeight + 'rpx' }"
				class="uiwu-nav-bar-item"
				:class="navIndex == index ? 'active' : ''"
				@tap.stop="openSwiper(item, index)"
			>
				<text>{{ item[nameType] }}</text>
			</view>
		</view>
	</view>
</template>
<script>
/**
 * uiwu-nav-bar  导航栏 菜单栏
 * @property {Array} list 导航数据
 * @property {Number} defaultHeight 导航栏高度默认74rpx
 * @property {String} top 距离顶部的距离
 * @property {String} nameType 展示名称自定义字段
 * @property {Boolean} isHeadBar 是否是自定义导航栏 默认false
 * @property {String} bgColor 导航栏背景色 默认白色
 * @event {Function} change 点击回调事件
 */
export default {
	name: 'UiwuNavBar',
	props: {
		list: {
			default: [],
			type: Array || Object
		},
		defaultHeight: {
			default: 78,
			type: Number
		},
		inedxNav: {
			default: 0,
			type: Number
		},
		top: {
			default: '0px',
			// #ifdef H5
			default: '44px',
			// #endif
			type: String
		},
		
		nameType: {
			default: 'name',
			type: String
		},
		isHeadBar: {
			default: false,
			type: Boolean
		},
		bgColor: {
			default: '#FFF',
			type: String
		},
		isfixed:{
			default:true,
			type:Boolean
		}
	},
	data() {
		return {
			navIndex: 0
		};
	},
	computed: {
		headBar() {
			return this.isHeadBar ? this.uiwu.headHeight() + this.uiwu.statusBar() + 'px' : '0px';
		}
	},
	methods: {
		openSwiper(item, index) {
			
			this.navIndex = index;
			this.$emit('change', item);
		}
	},
	created: function() {
		this.navIndex = this.inedxNav;
	}
};
</script>
<style lang="scss">
.uiwu-nav-bar {
	width: 100%;
	align-items: center;
	background-color: #fff;
	&.active{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		z-index: 99;
	}
	&-item {
		flex: 1;
		text-align: center;
		height: 100%;
		line-height: 78rpx;
		&.active {
			position: relative;
			text {
				color: $color;
			}
			&::after {
				content: '';
				width: 50rpx;
				height: 6rpx;
				background: $color;
				border-radius: 3rpx;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -25rpx;
			}
		}
		text {
			font-size: 30rpx;
			font-weight: normal;
			color: $color;
			white-space: nowrap;
		}
	}
}
</style>
